<template>
	<view class="stars-contaner">
		<view class="stars">
			<image v-for="(item,key) in 5" :key="item.key" src="../../../static/icon/chat.png"></image>
		</view>
		<view class="stars-star" :style="{width:(52/5)*average.average+'rpx'}">
			<view class="star-warp">
				<image  v-for="(item,key) in 5" :key="item.key" src="/static/icon/star.png"></image>
			</view>	
		</view>
		<text class="star-score">{{average.average}}</text>
	</view>
</template>

<script>
	export default {
		props:['average'],
		data(){
			return{
				average:{}
			}
		},
		mounted(){
			this.$watch('average', function(newVal, oldVal){//双层data先取值再赋值
				this.average=newVal;
			});
		},
	}
</script>

<style>
	.stars-contaner{display:flex;flex-direction:row;position: relative;}	
	.stars{display:flex;flex-direction:row;height:17rpx;margin-right:24rpx;margin-top:10rpx;}
	.stars image{padding-left:3rpx;height:19rpx;width:19rpx;}
	.star-score{color:#1f3463;font-size: 30rpx;}
	.stars-star{display:block; position: absolute;top: 10rpx;word-break:break-all;overflow:hidden;}
	.star-warp{width: 120px;}
	.star-warp image{padding-left:3rpx;height:19rpx;width:19rpx;float: left;}
</style>
